<template>
  <!-- 单个客户的所有证照信息 -->
  <el-dialog
    v-model="dialogFormVisible"
    title="维护客户证照信息"
    width="1400px"
    top="3vh"
    @close="close"
  >
    <el-table
      v-loading="listLoading"
      :data="list"
      @selection-change="setSelectRows"
    >
      <el-table-column
        align="center"
        label="客户全称"
        prop="CompanyAllName"
        show-overflow-tooltip
      />
      <el-table-column align="center" label="操作" width="100">
        <template #default="{ row }">
          <el-button type="text" @click="licenseEdit(row)">编辑证照</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @dblclick.prevent @click="save">
        保 存
      </el-button>
    </template>
  </el-dialog>

  <!-- 上传证照的弹框 -->
  <el-dialog
    v-model="upImg"
    title="客户营业执照"
    width="800px"
    @close="imgClose"
  >
    <el-form ref="formRef" label-width="80px" :model="imgForm" :rules="rules">
      <el-form-item label="上传证件" prop="LicensePhoto">
        <el-upload
          :file-list="imgForm.LicensePhoto"
          :multiple="true"
          class="avatar-uploader"
          action="https://api.sanjianke.com/common/Upload/upload?file=OrderAttach&type=image"
          list-type="picture-card"
          accept="image/png, image/jpeg"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleAvatarSuccess"
        >
          <el-icon>
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="imgClose">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script>
  import { CustomerLicenses } from '@/api/customerDataedit'
  import { CitySelect, IndustrySelect } from '@/api/common'
  import { EditLicenses } from '@/api/businessOrderCreate'

  export default defineComponent({
    name: 'LicenseMsg',
    emits: ['fetch-data'],
    setup() {
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        cityOptions: [],
        dialogVisible: false,
        industryOptions: [],
        listLoading: true,
        upImg: false,
        dialogImageUrl: '',
        list: [],
        realForm: {},
        formRef: null,
        form: {
          roles: [],
        },
        imgForm: {},
        rules: {
          // City: [{ required: true, trigger: 'blur', message: '请选择所属' }],
        },
        title: '',
        dialogFormVisible: false,
      })

      const showEdit = (row) => {
        if (!row) {
          state.title = '添加'
        } else {
          state.title = '编辑'
          state.form = Object.assign({}, row)
          getMsg()
          getCustomerList()
        }
        state.dialogFormVisible = true
      }
      const close = () => {
        state.realForm = {
          roles: [],
        }
        state.dialogFormVisible = false
      }

      const imgClose = () => {
        state.imgForm = {}
        state.upImg = false
      }

      const save = async () => {
        console.log(state.form.LicensePhoto, ' state.form.LicensePhoto')
        const { msg } = await EditLicenses(state.imgForm)
        $baseMessage(msg, 'success', 'vab-hey-message-success')
        getCustomerList()
        imgClose()
      }

      const getCustomerList = async () => {
        const dataMsg = {
          CustomerID: state.form.CustomerID,
        }
        const {
          data: { list },
        } = await CustomerLicenses(dataMsg)
        state.list = list
        state.listLoading = false
      }

      const citationMsg = (value, name) => {
        state.realForm[name] = value
      }
      const licenseEdit = (row) => {
        state.upImg = true
        state.imgForm = Object.assign({}, row)
        state.imgForm.LicensePhoto = JSON.parse(row.LicensePhoto)
      }
      const getMsg = async () => {
        const {
          data: { cityOptions },
        } = await CitySelect()
        const {
          data: { industryOptions },
        } = await IndustrySelect()
        state.cityOptions = cityOptions
        state.industryOptions = industryOptions
      }

      const handleRemove = (row) => {
        // const index = state.imgForm.LicensePhoto.findIndex((fileItem) => {
        //   console.log(fileItem.uid, row.uid, '123');
        //   return fileItem.uid === row.uid
        // })
        console.log(row, '123')
        // state.imgForm.LicensePhoto.splice(index, 1)
      }

      const handleAvatarSuccess = (response) => {
        const data = {
          url: response.data.url,
        }
        state.imgForm.LicensePhoto.push(data)
        ElMessage({
          message: '上传成功',
          type: 'success',
        })
      }

      const handlePictureCardPreview = (uploadFile) => {
        state.dialogImageUrl = uploadFile.url
        state.dialogVisible = true
      }

      return {
        ...toRefs(state),
        showEdit,
        licenseEdit,
        handleRemove,
        handleAvatarSuccess,
        handlePictureCardPreview,
        citationMsg,
        getMsg,
        getCustomerList,
        close,
        save,
      }
    },
  })
</script>
<style scoped>
  .flex {
    display: flex;
    align-items: center;
  }

  .flex :deep(.el-button) {
    padding: 0px 10px !important;
  }

  .avatar-uploader .avatar {
    border-radius: 100%;
    width: 80px;
    height: 80px;
    display: block;
  }
</style>
<style>
  .el-dialog img {
    width: 100%;
    height: 100%;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    border-radius: 100%;
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    text-align: center;
  }
</style>
